<template>
	<view class="page-container">
		<scroll-view scroll-y="true" class="scroll-view">
			<view class="normal-login-container">
				<div class="content-container">
					<!-- 轮播图 -->
					<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" :circular="true">
						<swiper-item v-for="(item, index) in swiperList" :key="index">
							<image :src="item.activity_banner_path" mode="aspectFill" class="swiper-image"></image>
						</swiper-item>
					</swiper>

					<!-- 收藏 -->
					<div class="mox">
						<div class="tom">
							<div>ID：{{ data.activity_id ? data.activity_id :0 }}</div>
							<div>浏览量：{{ data.browse_number ?data.browse_number :0 }}</div>
							<div>收藏：{{ data.collect_number ?data.collect_number:0 }}</div>
						</div>
					</div>
					<!-- 活动名称 -->
					<div class="activityname">
						<div class="name">{{ data.activity_title }}</div>
						<div class="size">{{ data.activity_describe }}</div>
					</div>
				</div>
				<div class="activitytime">
					<!-- 活动时间 -->
					<div class="activity-time">
						<div style="margin-bottom: 12px;" v-for="(item,index) in data.activity_spec_arr" :key="index">
							<div class="activity-time-h">活动时间</div>
							<div class="date-info" style="font-size: 15px;font-weight: 550;">日期：{{ item.activity_at }}</div>
							<div class="date-item">
								<div class="time-slot" v-for="(timeSlot, tIndex) in item.activity_spec_time_arr" :key="tIndex">
									<div class="time-info">
										<div class="time">·{{ timeSlot.activity_start_at }}-{{ timeSlot.activity_end_at }}</div>
										<div class="price">￥{{ timeSlot.activity_price }}元/位</div>
									</div>
									<div class="check-btn" @click="showRanking(item, timeSlot)">查看</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 活动地址 -->
					<div class="address">
						<div class="address-h">活动地址</div>
						<div class="address-h2">咸阳市</div>
						<div class="address-span">兴平市幸福路与粮食交叉正北方</div>
					</div>
				</div>
			</view>
		</scroll-view>
		
		<!-- 排行榜弹窗 -->
		<uni-popup ref="rankingPopup" type="bottom">
			<view class="ranking-popup">
				<view class="popup-header">
					<text class="popup-title">活动参与人数</text>
					<text class="popup-close" @click="closeRanking">×</text>
				</view>
				
				<view class="ranking-info">
					<text>活动日期：{{ selectedDate }}</text>
					<text>时间段：{{ selectedTimeSlot }}</text>
				</view>
				
				<scroll-view 
					scroll-y 
					class="ranking-list" 
					@scrolltolower="loadMoreRanking"
					:scroll-top="scrollTop"
				>
					<view class="ranking-item" v-for="(item, index) in rankingList" :key="index">
						<view class="ranking-index"><img style="width: 30px;height: 30px;border-radius: 12px;" :src="item.user_avatar" alt="" /></view>
						<view class="ranking-user">
							<image class="user-avatar" :src="item.avatar" mode="aspectFill"></image>
							<text class="user-name">{{ item.nick_name }}</text>
						</view>
						<view class="ranking-score">{{ item.created_at }}</view>
					</view>
					
					<view v-if="rankingList.length === 0 && !loading" class="empty-tip">
						暂无数据
					</view>
					
					<view v-if="loading && rankingList.length > 0" class="loading-more">
						加载中...
					</view>
					
					<view v-if="noMoreData && rankingList.length > 0" class="no-more">
						没有更多数据了
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
	import {
		user_getUserCreateActivityDetails,
		order_getRegistrationListByActivitySpecId
	} from '@/api/system/user.js'
	export default {
		components: { uniPopup },
		data() {
			return {
				// 轮播图数据
				swiperList: [],
				isCollected: false, // 收藏状态
				collectCount: 9, // 基础收藏数
				selectedTime: null, // 选中的时间
				activity_id: '',
				data: {},
				
				// 排行榜相关
				rankingList: [],
				selectedDate: "",
				selectedTimeSlot: "",
				rankingPage: 1, // 当前页码
				rankingSize: 10, // 每页条数
				loading: false, // 是否正在加载
				noMoreData: false, // 是否没有更多数据
				scrollTop: 0, // 滚动位置
				currentActivitySpecId: null, // 当前活动的规格ID
			}
		},
		onLoad(options) {
			if (options.data) {
				const receivedData = JSON.parse(decodeURIComponent(options.data));
				console.log('接收到的数据:', receivedData);
				this.activity_id = receivedData.activity_id;
				this.user_getUserCreateActivityDetails()
			}
		},
		methods: {
			async user_getUserCreateActivityDetails() {
				const data = await user_getUserCreateActivityDetails({
					activity_id: this.activity_id
				});
				if (data.code == 200) {
					this.swiperList = data.content.data.activity_banner_arr;
					this.data = data.content.data;
				}
			},
			
			// 显示排行榜
			async showRanking(item, timeSlot) {
				this.selectedDate = item.activity_at;
				this.selectedTimeSlot = `${timeSlot.activity_start_at} - ${timeSlot.activity_end_at}`;
				this.currentActivitySpecId = timeSlot.activity_spec_id;
				
				// 重置分页状态
				this.rankingPage = 1;
				this.noMoreData = false;
				this.rankingList = [];
				
				await this.loadRankingData();
				this.$refs.rankingPopup.open();
			},
			
			// 加载排行榜数据
			async loadRankingData() {
				if (this.loading || this.noMoreData) return;
				
				this.loading = true;
				try {
					const data = await order_getRegistrationListByActivitySpecId({
						page: this.rankingPage,
						size: this.rankingSize,
						activity_id: this.activity_id,
						activity_spec_id: this.currentActivitySpecId
					});
					
					if (data.code == 200) {
						const newData = data.content.data || [];
						this.rankingList = [...this.rankingList, ...newData];
						
						// 判断是否还有更多数据
						if (newData.length < this.rankingSize) {
							this.noMoreData = true;
						} else {
							this.rankingPage += 1;
						}
						
						// 滚动到顶部
						this.$nextTick(() => {
							this.scrollTop = 1;
							this.$nextTick(() => {
								this.scrollTop = 0;
							});
						});
					}
				} catch (error) {
					console.error('加载排行榜数据失败:', error);
				} finally {
					this.loading = false;
				}
			},
			
			// 加载更多排行榜数据
			async loadMoreRanking() {
				if (!this.noMoreData && !this.loading) {
					await this.loadRankingData();
				}
			},
			
			// 关闭排行榜
			closeRanking() {
				this.$refs.rankingPopup.close();
			},
			
			ddqrfun() {
				uni.navigateTo({
					url: '/pages/orderConfirmation'
				})
			},
			// 收藏/取消收藏
			handleCollect(status) {
				this.isCollected = status;
				
				if (status) {
					uni.showToast({
						title: '收藏成功',
						icon: 'none',
						duration: 1500
					});
				} else {
					uni.showToast({
						title: '已取消收藏',
						icon: 'none',
						duration: 1500
					});
				}
			},
			// 选择时间
			selectTime(dateIndex, timeIndex, timeSlot) {
				this.selectedTime = {
					dateIndex,
					timeIndex,
					timeSlot
				};
				uni.showToast({
					title: `已选择 ${timeSlot.time}`,
					icon: 'none',
					duration: 1500
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.page-container {
		width: 100%;
		min-height: 100vh;
		background-color: #f4f4f4;
		position: relative;
		padding-bottom: 80px;
		/* 添加与底部栏高度相同的内边距 */
		box-sizing: border-box;
	}
	
	.scroll-view {
		height: 100%;
	}
	
	.normal-login-container {
		width: 100%;
		height: 100%;
	}
	
	.content-container {
		background: #ffffff;
		padding-bottom: 12px;
	}
	
	.swiper {
		width: 100%;
		height: 350rpx;
	}
	
	.swiper-image {
		width: 100%;
		height: 100%;
	}
	
	.mox {
		width: 89%;
		margin-left: 25px;
		display: flex;
		justify-content: space-between;
		padding-top: 10px;
	}
	
	.tom {
		display: flex;
		color: #a6a6a6;
		font-size: 13px;
	}
	
	.tom div {
		margin-right: 20px;
	}
	
	.collect-icon {
		width: 30px;
		height: 30px;
	}
	
	.activityname {
		width: 89%;
		margin-left: 25px;
		margin-top: 20px;
	}
	
	.name {
		margin-bottom: 10px;
		font-size: 20px;
		font-weight: 600;
		color: #3e9e6e;
	}
	
	.size {
		font-size: 13px;
		color: #3e9e6e;
	}
	
	.activitytime {
		background: #ffffff;
		margin-top: 10px;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	
	.activity-time {
		width: 89%;
		margin-left: 25px;
	}
	
	.activity-time-h {
		font-size: 15px;
		color: #a6a6a6;
		font-weight: 500;
		margin-bottom: 6px;
	}
	
	.date-item {
		margin-bottom: 12px;
	}
	
	.date-info {
		font-size: 13px;
		margin-bottom: 8px;
	}
	
	.date-info span {
		font-size: 17px;
		font-weight: 500;
		margin-right: 5px;
	}
	
	.time-slot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}
	
	.time-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		background-color: #f4f4f4;
		border-radius: 4px;
		padding: 8px 12px;
		margin-right: 10px;
		transition: all 0.3s ease;
		
		&.selected {
			background-color: #3b9c6c;
			
			.time,
			.price {
				color: #ffffff;
			}
		}
	}
	
	.time {
		color: #3b9c6c;
		font-size: 13px;
		margin-right: 12px;
	}
	
	.price {
		color: #3b9c6c;
		font-size: 13px;
	}
	
	.check-btn {
		background: #3b9c6c;
		color: #ffffff;
		font-size: 13px;
		padding: 6px 12px;
		border-radius: 4px;
		cursor: pointer;
	}
	
	.address {
		width: 89%;
		margin-left: 25px;
		margin-top: 20px;
		
		.address-h {
			font-size: 15px;
			color: #a6a6a6;
			font-weight: 500;
			margin-bottom: 6px;
		}
		
		.address-h2 {
			font-size: 17px;
			font-weight: 600;
			margin-bottom: 6px;
			margin-top: 12px;
		}
		
		.address-span {
			font-size: 13px;
			color: #a6a6a6;
		}
	}
	
	/* 排行榜弹窗样式 */
	.ranking-popup {
		background-color: #fff;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		padding: 16px;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
	}
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 15px;
		border-bottom: 1px solid #eee;
	}
	
	.popup-title {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}
	
	.popup-close {
		font-size: 24px;
		color: #999;
	}
	
	.ranking-info {
		padding: 15px 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
		font-size: 14px;
		color: #666;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.ranking-list {
		padding: 15px 0;
		max-height: 50vh;
		flex: 1;
		overflow: auto;
	}
	
	.ranking-item {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.ranking-index {
		width: 30px;
		height: 30px;
		background-color: #f1f1f1;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		margin-right: 12px;
	}
	
	.ranking-user {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.user-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
	}
	
	.user-name {
		font-size: 15px;
	}
	
	.ranking-score {
		font-weight: bold;
		color: #3b9c6c;
	}
	
	.empty-tip {
		text-align: center;
		padding: 20px;
		color: #999;
	}
	
	.loading-more,
	.no-more {
		text-align: center;
		padding: 10px;
		color: #999;
		font-size: 14px;
	}
	
	/* 固定底部支付区域 */
	.footer-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 80px;
		/* 稍微增加高度以适应更多内容 */
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		z-index: 999;
		padding: 0 15px;
		box-sizing: border-box;
		
		.pay-button {
			width: 200px;
			height: 40px;
			background-color: #339966;
			color: #ffffff;
			border-radius: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			font-weight: 500;
		}
	}
</style>